<template>
  <unit-table
    ref="unitTable"
    :columns="this.$staticMenu.unitColumns"
    :params="tableParams"
    :size="pageSize"
    :sizeOptions="pageSizeOptions"
    :type="tableType"
    :url="tableUrl"
    rowKeyName="fileId"
    @onSelect="tableOnSelect"
  >
    <!-- 补充搜索条件 -->
    <a-row slot="searchCri">
      <a-col :span="3">
        <a-input v-model="tableParams.fileName" class="searchCriteria" @keydown.native="keydown($event)" placeholder="名称"/>
      </a-col>
      <a-col :span="3">
        <a-select
          v-model="tableParams.fileYear"
          class="searchCriteria"
          @change="handleYearChange"
        >
          <a-select-option v-for="(item, key) of year"
                           :key='item'
                           :value="item"
          >{{ item }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="3">
        <a-select
          v-model="tableParams.region"
          class="searchCriteria"
          @change="handleLocationChange"
        >
          <a-select-option v-for="(item, key) of location"
                           :key='item'
                           :value="item"
          >{{ item }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="3">
        <a-select
          v-model="tableParams.fileType"
          class="searchCriteria"
          @change="handleTypeChange"
        >
          <a-select-option v-for="(item, key) of type"
                           :key='item.value'
                           :value="item.value"
          >{{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="3">
        <a-select
          v-model="tableParams.fileSecurity"
          class="searchCriteria"
          @change="handleLevelChange"
        >
          <a-select-option v-for="(item, key) of level"
                           :key='item.value'
                           :value="item.value"
          >{{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="9" style="text-align: right;">
        <a-button type="primary" @click="criteriaSearch">
          <a-icon type="search"/>
          查询
        </a-button>
        <a-button @click="clearCriteria">
          <a-icon type="sync"/>
          </i>重置
        </a-button>
      </a-col>
    </a-row>
    <!-- end -->
    <!-- 补充表格操作 -->
    <div slot='tableAct' class="actionBtn">
      <a-button type="primary" @click="exportData">
        <a-icon type="download"/>
        导出
      </a-button>
    </div>
    <!-- end -->
  </unit-table>
</template>

<script>
  import {GETALLLIST, GETALLREGION, GETALLTYPE, GETALLYEAR} from '@/../static/js/apis.js'
  import unitTable from "@/common/table"
  import global from "@/../static/global.vue"

  export default {
    name: 'allUnit',
    components: {
      unitTable
    },
    data() {
      return {
        year: [],
        location: [],
        type: [],
        level: [],
        treeSelectedKeys: '0',
        tableSelectedKeys: [],
        tableUrl: GETALLLIST.url,  //调用表格组件，必须参数，后台数据接口
        tableType: GETALLLIST.type,  //调用表格组件，必须参数，后台方法方法（get，post）
        pageSize: 15,
        pageSizeOptions: ['15', '20', '40'],
        /*调用表格组件，可选参数，其他相关搜索条件*/
        tableParams: {
          fileName: "",
          fileYear: "全部年份",
          region: "全部区域",
          fileType: "全部类型",
          fileSecurity: "",
          menuId: "35"
        }
      }
    },
    methods: {
      keydown(e){
        if(e.keyCode==32){
          e.returnValue=false
        }
      },
      /*获取静态数据*/
      getStaticData() {
        let self = this
        GETALLYEAR('', function (res) {
          self.year = res.obj
        })
        GETALLREGION('', function (res) {
          self.location = res.obj
        })
        GETALLTYPE('', function (res) {
          self.type = res.obj
        })
        this.level = this.$staticMenu.level
      },
      /*表格checkbox选中事件*/
      tableOnSelect(selectedRowKeys, selectedRows) {
        this.tableSelectedKeys = selectedRowKeys
      },
      /*选择当前状态*/
      handleYearChange(value) {
        this.tableParams.fileYear = value
      },
      handleLocationChange(value) {
        this.tableParams.region = value
      },
      handleTypeChange(value) {
        this.tableParams.fileType = value
      },
      handleLevelChange(value) {
        this.tableParams.fileSecurity = value
      },
      /*查询按钮*/
      criteriaSearch() {
        this.$refs.unitTable.fetch(1)
      },
      /*重置按钮*/
      clearCriteria() {
        this.tableParams.fileName = ''
        this.tableParams.fileYear = '全部年份'
        this.tableParams.region = '全部区域'
        this.tableParams.fileType = '全部类型'
        this.tableParams.fileSecurity = ''
        this.criteriaSearch()
      },
      exportData() {
        const selectedRowKeys = this.tableSelectedKeys
        if (selectedRowKeys.length > 0) {
          window.open(global.dataManUrl + "/rest/file/downloadMulFile?fileIds=" + selectedRowKeys);
        } else {
          this.$message.warning("请在表格中勾选要导出的数据！")
        }
      }
    },
    created() {
      this.getStaticData()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .searchCriteria {
    width: 90%;
  }

  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }
</style>
